<template>
  <ve-liquidfill :data="chartData" height="100%"
    :settings="chartSettings"
  ></ve-liquidfill>
</template>

<script>
import CommonDataMixin from '../../mixins/commonDataMixin'
function getColor (value) {
  return value > 0 && value <= 0.5 ? 'rgba(97, 216, 0, 0.7)' : value > 0.5 && value <= 0.8 ? 'rgba(204, 178, 26, 0.7)' : value > 0.8 ? 'rgba(241, 47, 28, 0.7)' : '#c7c7cb'
}
export default {
  mixins: [CommonDataMixin],
  data () {
    return {
      chartSettings: {},
      chartData: {}
    }
  },
  watch: {
    userGrowthLastMonth () {
      console.log(this.userGrowthLastMonth, '沈金炳')
      this.chartData = {
        columns: ['title', 'percent'],
        rows: [{
          title: '用户月同比增长',
          percent: this.userGrowthLastMonth / 1000
        }]
      }
      this.chartSettings = {
        seriesMap: {
          /* eslint-disable */
          '用户月同比增长': {
            radius: '80%',
            label: {
              formatter: (v) => {
                console.log(v, '百度胡')
                return `${(v.data.value).toFixed(2)}%`
              },
              textStyle: {
                fontSize: 36,
                color: '#999',
                fontWeight: 'normal'
              },
              position: ['50%', '50%']
              // insideColor: 'red' // 设置重叠颜色
            },
            outline: {
              itemStyle: {
                borderColor: '#aaa4a4',
                borderWidth: 1,
                color: 'none',
                shadowBlur: 0,
                shadowColor: '#fff'
                // opacity: 0.6
              },
              borderDistance: 0
            },
            period: 1500,
            emphasis: {
              itemStyle: {
                opacity: 0.2
              }
            },
            itemStyle: {
              shadowBlur: 0,
              shadowColor: '#fff'
            },
            amplitude: 8,
            color: [getColor(this.chartData.rows[0].percent)]
          }
        }
      }
    }
  }
}
</script>

<style>

</style>
